<template>
<view class="new_pet_raiser-main page-view">
	<view class="tab-list">
		<view :class="['tab-item', {'curr-tab-item': index == tab.curr}]" v-for="(item, index) in tab.list"
		@click="tab.curr = index">
			<view class="label-wrap">
				<view class="label">{{ item }}</view>
			</view>
		</view>
	</view>
	
	<view class="tag-list">
		<view :class="['item', {'selected-item': index == tag.curr}]" 
		v-for="(item, index) in tag.list"
		@click="tag.curr = index">
			{{ (index != 0 ? "#" : "") + item.text }}
		</view>
	</view>
	
	<scroll-view class="article-list" :scroll-y="true" enable-flex>
		<view class="left-list">
			<view class="item" v-for="item in 10">
				<image class="cover" src="@/static/images/a.jpg" mode="aspectFill"></image>
				<view class="title">
					开启时髦异域之旅，跟着ETRO去旅行
				</view>
				<view class="publisher-like">
					<view class="publisher">
						<image src="@/static/images/a.jpg"></image>
						<view>王兽医</view>
					</view>
					<view class="like">
						<image src="@/static/images/icon/like-greyblue.png"></image>
						<view>2339赞</view>
					</view>
				</view>
			</view>
		</view>
		<view class="right-list">
			<view class="item" v-for="item in 9">
				<image class="cover" src="@/static/images/a.jpg" mode="aspectFill"></image>
				<view class="title">
					开启时髦异域之旅
				</view>
				<view class="publisher-like">
					<view class="publisher">
						<image src="@/static/images/a.jpg"></image>
						<view>王兽医</view>
					</view>
					<view class="like">
						<image src="@/static/images/icon/like-greyblue.png"></image>
						<view>2339赞</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</view>
</template>

<script>
export default {
	data() {
		return {
			// 顶层tab
			tab: {
				curr: 0,
				list: ["视频", "图文"]
			},
			// 标签
			tag: {
				curr: 0,
				list: [
					{ text: "最新" },
					{ text: "狗" },
					{ text: "话题" },
					{ text: "话题" }
				]
			}
		};
	}
}
</script>

<style lang="less">
.new_pet_raiser-main {
	display: flex;
	flex-direction: column;
	
	.tab-list {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 85rpx;
		
		.tab-item {
			height: 100%;
			padding: 0 96rpx;
			
			.label-wrap {
				height: 100%;
				border-bottom: 4rpx #FFFFFF solid;
				transition: .2s;
				
				.label {
					display: flex;
					align-items: center;
					height: 100%;
					font-size: 32rpx;
					font-weight: 350;
					color: #6E6E6E;
					transition: .2s;
				}
			}
		}
		
		.curr-tab-item {
			.label-wrap {
				border-color: #FF6D03;
				
				
				.label {
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}
	
	.tag-list {
		display: flex;
		flex-wrap: wrap;
		gap: 24rpx;
		border-top: 1rpx solid #F4F8FF;
		margin-top: 20rpx;
		padding: 10rpx 32rpx 32rpx;
		
		.item {
			display: flex;
			align-items: center;
			flex-shrink: 0;
			height: 48rpx;
			border-radius: 294rpx;
			padding: 0 20rpx;
			border: 1rpx solid #AAAAAA;
			background: #FFFFFF;
			transition: .1s;
			font-size: 28rpx;
			color: #AAAAAA;
		}
		
		.selected-item {
			border-color: #FF6D03;
			background: #FF6D03;
			color: #FFFFFF;
		}
	}
	
	.article-list {
		display: flex;
		flex: 1;
		height: 0;
		justify-content: space-between;
		align-items: flex-start;
		padding: 0 32rpx 32rpx;
		
		.left-list, .right-list {
			display: flex;
			flex-direction: column;
			gap: 32rpx;
			
			.item {
				width: 332rpx;
				
				.cover {
					width: 332rpx;
					height: 400rpx;
					border-radius: 16rpx;
					opacity: 1;
				}
				
				.title {
					margin-top: 16rpx;
					font-size: 28rpx;
					line-height: 42rpx;
					color: #0B1526;
				}
				
				.publisher-like {
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.publisher {
						display: flex;
						align-items: center;
						flex: 1;
						gap: 16rpx;
						
						>image {
							width: 48rpx;
							height: 48rpx;
							border-radius: 100%;
						}
						
						>view {
							flex: 1;
							width: 0;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 24rpx;
							font-weight: normal;
							line-height: 34rpx;
							color: #8D93A6;
						}
					}
					
					.like {
						display: flex;
						align-items: center;
						gap: 5rpx;
						
						>image {
							width: 22rpx;
							height: 20rpx;
						}
						
						>view {
							font-size: 20rpx;
							line-height: 28rpx;
							color: #B1B4C3;
						}
					}
				}
			}
		}
	}
}
</style>
